<template>
	<view>
		<view style="margin: 20rpx;padding: 30rpx;background-color: white;border-radius: 20rpx;">
			<u-form labelPosition="left" :model="getUserinfo" :rules="rules" ref="uForm">
				<u-form-item label="头像" prop="avatar" borderBottom>
					<image style="width: 100rpx;height: 100rpx;border-radius: 50%;"
						:src="getUserinfo.avatar.includes('http')?getUserinfo.avatar:getBaseUrl+getUserinfo.avatar"
						mode="" @click="imgChooimg"></image>
				</u-form-item>
				<u-form-item label="昵称" prop="nickname" borderBottom>
					<u--input v-model="getUserinfo.nickname" border="none"></u--input>
				</u-form-item>
				<u-form-item label="性别" prop="sex" borderBottom>
					<u-radio-group v-model="getUserinfo.sex" placement="row" @change="groupChange">
						<u-radio v-for="(item, index) in sexs" :key="index"
							:label="item.name" :name="item.value" @change="radioChange">
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="电话" prop="phoneNum" borderBottom>
					<u--input v-model="getUserinfo.phoneNum" border="none"></u--input>
				</u-form-item>
			</u-form>
			<button @click="submit">确认修改</button>
			<u-toast ref="uToast" />
		</view>
	</view>
</template>

<script>
	// const baseUrl = 'http://localhost:8080'
	import {
		mapGetters
	} from 'vuex'
	import {
		updateMiniUser
	} from '../../config/api.js'
	export default {
		data() {
			return {
				Userinfo: {
					avatar: '',
					nickname: '',
					sex: '',
					phoneNum: ''
				},
				// 基本案列数据
				sexs: [{
					name: '男',
					value: '1'
				}, {
					name: '女',
					value: '2'
				}, {
					name: '保密',
					value: '0'
				}],
				rules: {
					'getUserinfo.nickname': {
						type: 'string',
						required: true,
						message: '请填写昵称',
						trigger: ['blur', 'change']
					},
					'getUserinfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		computed: {
			...mapGetters(['getUserinfo', 'getBaseUrl'])
		},
		methods: {
			submit() {
				// 提交
				updateMiniUser({
					id: this.getUserinfo.id,
					nickname: this.getUserinfo.nickname,
					sex: this.getUserinfo.sex,
					phoneNum: this.getUserinfo.phoneNum
				}).then(res => {
					if (res.data.msg == "修改成功") {
						this.$refs.uToast.show({
							type: 'success',
							message: '修改成功'
						})
					} else {
						this.$refs.uToast.show({
							type: 'warning',
							message: '网络出了点小问题'
						})
					}
				})
			},
			upload(img) {
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						url: this.getBaseUrl + '/citylife/front/avatar',
						filePath: img,
						name: 'file',
						success: (res) => {
							this.$refs.uToast.show({
								type: 'success',
								message: '修改成功'
							})
						},
						fail() {
							this.$refs.uToast.show({
								type: 'warning',
								message: '网络出了点小问题'
							})
						}
					})
				})
			},
			imgChooimg() {
				//选择头像
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: async (res) => {
						this.getUserinfo.avatar = res.tempFilePaths[0]
						console.log(this.getUserinfo.avatar);
						uni.uploadFile({
							url: this.getBaseUrl + '/citylife/front/avatar',
							filePath: this.getUserinfo.avatar,
							name: 'file',
							header: {
								'Authorization': 'wx ' + uni.getStorageSync('token')
							},
							success: (res) => {
								this.$refs.uToast.show({
									type: 'success',
									message: '修改成功'
								})
							},
							fail() {
								this.$refs.uToast.show({
									type: 'warning',
									message: '网络出了点小问题'
								})
							}
						})
					},
				});
			},
			groupChange(n) {
				console.log("性别选择器：", n);
			},
			radioChange(n) {
				console.log('radioChange', n);
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">


</style>